<template>
    <div class="example">
      <div class="part">
        <div class="title">
          <span class="number">1</span>
          <span class="name titleName">PC Activation API</span>
        </div>
        <div class="cont">The PC Activation API is provided by the CBI for technical validation.</div>
      </div>
      <div class="part">
        <div class="title">
          <span class="number">1.1</span>
          <span class="name">  API Request parameters</span>
        </div>
        <div class="table1">
          <el-table
            :data="tableData1"
            border>
            <el-table-column
              prop="date"
              label="Parameter"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="Parameter Name"
              width="260">
            </el-table-column>
            <el-table-column
              prop="type"
              label="Date Type"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mo"
              label="Mandatory/Optional"
              width="260">
            </el-table-column>
            <el-table-column
              prop="note"
              label="Note"
              width="260">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="part">
        <div class="title">
          <span class="number">1.2</span>
          <span class="name">API Response parameters</span>
        </div>
        <div class="table2">
          <el-table
            :data="tableData2"
            border>
            <el-table-column
              prop="date"
              label="Parameter"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="Parameter Name"
              width="260">
            </el-table-column>
            <el-table-column
              prop="type"
              label="Date Type"
              width="180">
            </el-table-column>
            <el-table-column
              prop="note"
              label="Note">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="part">
        <div class="title">
          <span class="number">1.3</span>
          <span class="name">API-JSON Sample Request</span>
        </div>
        <div class="cont">The detail process of getting Authorization, please refer to 3-Token API.</div>
        <div class="json">
          <div style="margin:5px 0;">
            <span>{{jsonRequest.type}}&nbsp;&nbsp;</span>
            <span class="url">{{jsonRequest.url}}</span>
          </div>
          <div>
            <span>Content-Type:</span>
            <span>{{jsonRequest.contentType}}</span>
          </div>
          <pre>{{jsonRequest.data}}</pre>
        </div>
      </div>
      <div class="part">
        <div class="title">
          <span class="number">1.4</span>
          <span class="name">API- JSON Sample Response</span>
        </div>
        <div class="cont">Sample API response with XML format returned from API platform.</div>
        <div class="json">
          <pre>{{jsonResponse.data}}</pre>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Example",
      data() {
        return {
          tableData1: [{
            date: 'appKey',
            name: '/appKey',
            type: 'vchar',
            mo: 'O',
            note: ''
          }, {
            date: 'secret',
            name: '/secret',
            type: 'vchar',
            mo: 'O',
            note: ''
          }, {
            date: '_timestamp',
            name: '/_timestamp',
            type: 'timestamp',
            mo: 'O',
            note: ''
          }, {
            date: 'sign',
            name: '/sign',
            type: 'vchar',
            mo: 'O',
            note: ''
          }, {
            date: 'prod_machine_type',
            name: '/prod_machine_type',
            type: 'vchar',
            mo: 'O',
            note: ''
          }, {
            date: 'warranty_start_month',
            name: '/warranty_start_month',
            type: 'vchar',
            mo: 'O',
            note: ''
          }, {
            date: 'page',
            name: '/page',
            type: 'vchar',
            mo: 'O',
            note: ''
          }],
          tableData2: [{
            date: 'httpStatusCode',
            name: '/status',
            type: 'String',
            note: 'Default 200/400'
          }, {
            date: 'httpMessage',
            name: '/msg',
            type: 'String',
            note: 'Default  success/error'
          }, {
            date: 'dataSize',
            name: '/data/total',
            type: 'Integer',
            note: 'Default'
          }, {
            date: 'pageNumber',
            name: '/data/page',
            type: 'Integer',
            note: 'Default pageSize:100'
          }, {
            date: 'mtmsbomData',
            name: '/data/data[]',
            type: 'jsonarray',
            note: 'mtmsbomData'
          }],
          jsonRequest: {
            type: 'POST',
            url: 'https://soa-test.lenovo.com/t1/api/pc_activition/v1.0/api/getMtmSbomData HTTP/1.1',
            contentType: 'application/json',
            data: {
              "appKey": "cbi_public_certification",
              "secret": "85699AC56E0A7D6730849FC1563EE0C7",
              "_timestamp": "1532423927890",
              "sign": "A87F84874C3329580672419CC5D391A9",
              "prod_machine_type": "6173",
              "warranty_start_month": "201611",
              "page": "1"
            }
          },
          jsonResponse: {
            data: {
              "status": 200,
              "msg": "success",
              "data": {
                "total": 126,
                "page": 1,
                "data": [
                  {
                    "wty_coverage_start_date": "20161102",
                    "prod_build_date": "20161031",
                    "prod_ship_date": "20161101",
                    "prod_series": "77X2SHT",
                    "source": "ibase",
                    "sold_to_name": "ALSO Schweiz AG",
                    "ship_to_name": "ALSO SCHWEIZ AG",
                    "wty_coverage_end_date": "20191216",
                    "prod_material": "61732UL",
                    "ship_to_id": "1213063824",
                    "prod_activation_flag": "",
                    "prod_activation_date": "",
                    "prod_brand_name": "STORAGE",
                    "sales_geography": "EMEA",
                    "sales_market": "SWITZERLAND",
                    "prod_subser_name": "Storage Tape Products",
                    "prod_machine_type": "6173",
                    "ship_to_country": "CH",
                    "prod_activation_country": "",
                    "prod_activation_source": "",
                    "prod_material_desc": "Storage TS3100 TapeLibraryModel L2U",
                    "prod_bh_series": "OPTION",
                    "qty": 1,
                    "prod_series_name": "Tape Series",
                    "sales_territory": "DACH",
                    "sold_to_id": "1213063824"
                  },
                ]
              }
            }
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  .example{
    margin: 10px 41px 0 41px;
    .part{
      margin: 30px 0;
      .title{
        margin:10px;
        font-weight: bold;
        .number{
          font-size: 20px;
          color: #0090e9;
          margin-right: 10px;
        }
        .name{
          font-size: 20px;
          color: #000;
        }
        .titleName{
          font-size: 24px;
        }
      }
      .cont{
        font-size: 16px;
        line-height:24px;
      }
      .json{
        .url{
          color:#0090e9;
          cursor: pointer;
        }
        .url:hover{
          text-decoration: underline;
        }
      }
      .table1{
        width:1142px;
      }
      .table2{
        width:880px;
      }
    }
  }

</style>
